<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="layout">
<head>
    <title>New/Edit Pet</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css"/>
</head>
<body>

<div class="container">

    <!-- sample header -->
    <nav class="navbar navbar-default navbar-inverse" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Static Brand</a>
        </div>

        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="employeeList.html">Link1</a></li>
                <li><a href="#">Link2</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link3</a></li>
            </ul>
        </div>
    </nav>
    <!-- sample header end -->

    <!--/*@thymesVar id="visit" type="cn.wilmar.petclinic.model.Visit"*/-->

    <h1 layout:fragment="header">
        <span th:text="${visit['new']} ? 'New Visit' : 'Edit Visit'">New/Edit Visit</span>
    </h1>

    <div layout:fragment="content">

        <table class="table table-striped" style="width: 333px;">
            <tr>
                <th>Name</th>
                <td><b th:text="${visit.pet.name}">xiaobai</b></td>
            </tr>
            <tr>
                <th>Birth Date</th>
                <td th:text="${visit.pet.birthDate}">2011-9-9</td>
            </tr>
            <tr>
                <th>Type</th>
                <td th:text="${visit.pet.type.name}">Cat</td>
            </tr>
            <tr>
                <th>Owner</th>
                <td th:text="|${visit.pet.owner.firstName} ${visit.pet.owner.lastName}|">yinguowei</td>
            </tr>
        </table>

        <div class="row">
            <div class="col-md-6">
                <!--/*@thymesVar id="pet" type="cn.wilmar.petclinic.model.Pet"*/-->
                <form method="post" th:object="${visit}" class="form-horizontal" action="../owners/ownerDetails.html"
                      th:action="@{${#httpServletRequest.servletPath}}">
                    <div class="form-group has-feedback">

                        <div class="form-group">
                            <label class="col-sm-2 control-label">Date</label>
                            <div class="col-sm-10">
                                <input class="form-control" th:field="*{date}"/>
                                <span class="help-inline" th:errors="*{date}">[date error]</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">Description</label>
                            <div class="col-sm-10">
                                <input class="form-control" th:field="*{description}"/>
                                <span class="help-inline" th:errors="*{description}">[description error]</span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input type="hidden" name="petId" th:value="${visit.pet.id}"/>
                            <button class="btn btn-default" type="submit">Add Visit</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <br/>
        <b>Previous Visits</b>
        <table class="table table-striped" style="width: 333px;">
            <tr>
                <th>Date</th>
                <th>Description</th>
            </tr>
            <tr th:if="${visit.pet.visits.size()==1}">
                <td colspan="2">No previous visitis.</td>
            </tr>
            <tr th:if="${!visit['new']}" th:each="visit : ${visit.pet.visits}">
                <td th:text="${visit.date}">2000-1-1</td>
                <!--<joda:format value="${visit.date}" pattern="yyyy/MM/dd"/>-->
                <td th:text="${visit.description}">Visited!</td>
            </tr>
        </table>

        <script>
            $(function () {
                $("#date").datepicker({dateFormat: 'yy/mm/dd'});
            });
        </script>
    </div>


    <div class="text-center">
        sample copyright 2016
    </div>
</div>
</body>
</html>

